<template>
  <div class="user">
    <!--    如果用户未登录就请求登录或者注册-->
    <div v-if="!this.$store.getters.getToken">
      <el-button type="text" @click="login_or_register">游客，请登录</el-button>
    </div>
    <div v-else>
		<el-row type="flex" align="middle" gutter="40">
			<el-col span="4">
				<el-avatar
					:src="this.$store.getters.getAvatar"></el-avatar>
			</el-col>
			<el-col offset="2" span="16">
				<el-dropdown>
						<span class="el-dropdown-link">
							<router-link to="/user" style="color: white; text-decoration: none;">{{ this.$store.getters.getUsername }}</router-link> 
						</span>
					
					
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item>
							<router-link to="/user">个人主页</router-link>
						</el-dropdown-item>
						<el-dropdown-item>
							<router-link to="/store">游戏仓库</router-link>
						</el-dropdown-item>
						<el-dropdown-item>
							<div @click="visible=true">注销</div>
						</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
				<el-popover placement="top" width="180" v-model="visible">
					<p>确定退出登录吗？</p>
					<div style="text-align: right; margin: 10px 0 0">
						<el-button size="mini" type="text" @click="visible = false">取消</el-button>
						<el-button type="primary" size="mini" @click="logout">确定</el-button>
					</div>
					<el-button type="text" slot="reference">{{ this.$store.getters.getUser.username }}</el-button>
				</el-popover>
			</el-col>
		</el-row>
    </div>
      

      
    <login_form></login_form>
  </div>
</template>

<script>
import {mapActions, mapGetters} from "vuex";
import baseUrl from "@/api/baseUrl";
import {getUserInfo} from "@/api/user";

export default {
  name: 'user_bar',
  beforeUpdate() {
    this.activeIndex = this.$route.path;
  },
  data() {
    return {
      visible: false,
      activeIndex: "", // 头部导航栏选中的标签
    };
  },
  mounted() {
    // 获取浏览器localStorage，判断用户曾经登录过
    // console.log(localStorage.getItem("token"))
    if (localStorage.getItem("token")) {
      // 如果token有效，则确认登录状态
      getUserInfo(localStorage.getItem('token')).then(response => {
        let code = response.data.code;
        console.log(response.data.data)
        if (code == 200) {
          // console.log(response.data.data.userInfo)
          this.$store.dispatch('setToken', localStorage.getItem("token"));
          this.setId(response.data.data.userInfo.accountId)
          this.setBalance(response.data.data.userInfo.balance);
          this.setAvatar(baseUrl + response.data.data.userInfo.avatar.slice(1))
          this.setUsername(response.data.data.userInfo.username);
        } else {
          // code == 401
          this.logout();
          // this.$alert('未知错误')
        }
      }).catch(error=>{
        console.log(error)
        this.logout()
      })
    } else {
      // this.$alert(localStorage.getItem("token"))
      this.logout()
      // this.$router.back()
    }
  },
  watch: {},
  computed: {
    ...mapGetters(["getUser"]),
    avatar: function () {
      return baseUrl + this.userInfo.avatar
    }
  },
  methods: {
    ...mapActions(["setUser", "setToLogin", "setAvatar", "setToken", "setBalance", "setUsername", "setId"]),
    login() {
      // 点击登录按钮, 通过更改vuex的showLogin值显示登录组件
      this.setToLogin(true);
    },
    login_or_register() {
      this.setToLogin(true)
    },
    // 退出登录
    logout() {
      // 清空本地登录信息
      localStorage.setItem("token", "");
      localStorage.setItem("user", "")
      // 清空vuex登录信息
      this.setId("")
      this.setUser("");
      this.setToken("");
      this.setAvatar("")
      this.setBalance("")
    },
    isRegister(val) {
      this.register = val;
    },
  }
}
</script>

<style>

.user {
  /*padding-right: 10px;*/
  margin: 1%;
}

#user {
  float: right;
  width: 20%;
  /* height: 100%; */
  text-align: center;
}

#img {
  size: 50px;
}
</style>
